import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Menu, Header, Icon } from 'semantic-ui-react'
import Styled from 'styled-components'
import PropTypes from 'prop-types'
import { Switch, Redirect, withRouter } from 'react-router'
import { push } from 'connected-react-router'
import { PrivateRoute } from 'components/route'
import { dataset as datasetDuck } from 'ducks'
import Data from './data'
import Config from './config'
import NewFolder from './newFolder'
import Uploader from './upload'

const StyledContent = Styled.div`
  padding-top: 150px;
  width:100%;
`

const StyledContentDiv = Styled.div`
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: -150px
`

const StyledContentDivScroll = Styled.div`
  padding-top: 30px;
  overflow: scroll; 
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
`

const StyledHeader = Styled(Header)`
  margin-bottom: 30px!important;
`

class DataSetContent extends Component {
  componentWillReceiveProps = (nextProps) => {
    const newDataset = nextProps.match.params.datasetName
    const { activeDataset, actionSetActiveDataset } = this.props
    if (newDataset !== activeDataset) {
      actionSetActiveDataset(newDataset)
    }
  }

  render() {
    const {
      activeTab, location, match, gotoTab,
    } = this.props
    return (
      <StyledContent>
        <StyledContentDiv>
          <StyledHeader as="h3">
            <Icon name="image" />
            <Header.Content>DataSet 1</Header.Content>
          </StyledHeader>
          <Menu pointing secondary fluid size="large">
            {/* <Menu.Item
              name="数据集概览"
              onClick={() => gotoTab(`${match.url}/overview`)}
              active={activeTab === 'overview'}
            /> */}
            <Menu.Item
              name="内容管理"
              onClick={() => gotoTab(`${match.url}/data`)}
              active={activeTab === 'data'}
            />
            <Menu.Item
              name="设置"
              onClick={() => gotoTab(`${match.url}/config`)}
              active={activeTab === 'config'}
            />
          </Menu>
        </StyledContentDiv>
        <StyledContentDivScroll>
          <Switch location={location}>
            {/* <PrivateRoute path={`${match.url}/overview`} component={Overview} exact /> */}
            <PrivateRoute path={`${match.url}/data/:path*`} component={Data} exact={false} />
            <PrivateRoute path={`${match.url}/config`} component={Config} exact={false} />
            <PrivateRoute path={`${match.url}/newFolder/:path*`} component={NewFolder} exact />
            <PrivateRoute path={`${match.url}/upload/:path*`} component={Uploader} exact />
            <Redirect from={`${match.url}`} to={`${match.url}/data`} />
          </Switch>
        </StyledContentDivScroll>
      </StyledContent>
    )
  }
}

DataSetContent.propTypes = {
  activeTab: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired,
  gotoTab: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  activeTab: datasetDuck.selectors.activeTab(state),
  activeDataset: datasetDuck.selectors.activeDataset(state),
})

const mapDispatchToProps = {
  gotoTab: path => push(path),
  actionSetActiveDataset: datasetDuck.creators.actionSetActiveDataset,
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(DataSetContent),
)
